﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件上传 - 带上传参数、回调函数</title>
    <link href="demo.css" rel="stylesheet" type="text/css" />
    <link href="../css/uploader.all.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header" class="header">Header</div>
    <div class="main">
        <div class="content">
            <div class="contentin">
                <div>
                    <a id="upload-target" class="x-button">选择文件并上传</a>
                </div>
                <div id="upload-view"></div>
                <div id="log"></div>
            </div>
        </div>
        <div id="sidebar" class="sidebar"></div>
    </div>

    <script type="text/javascript" src="demo.js"></script>

    <script type="text/javascript" src="../js/Q.js"></script>
    <script type="text/javascript" src="../js/Q.Uploader.js"></script>
    <script type="text/javascript" src="../js/Q.Uploader.UI.File.js"></script>

    <script type="text/javascript">
        function log(msg) {
            document.getElementById("log").innerHTML += (msg != undefined ? msg : "") + "<br />";
        }

        var Uploader = Q.Uploader;

        var uploader = new Uploader({
            url: UPLOAD_URL,
            target: document.getElementById("upload-target"),
            view: document.getElementById("upload-view"),

            allows: ".txt,.jpg,.png,.gif,.mp4,.zip", //允许上传的文件格式
            maxSize: 2 * 1024 * 1024,                //允许上传的最大文件大小,字节,为0表示不限(仅对支持的浏览器生效)

            //每次上传都会发送的参数(POST方式)
            data: { user: "Devin" },

            /*
                上传回调事件：
                init,          //上传管理器初始化完毕后触发

                select,        //点击上传按钮准备选择上传文件之前触发,返回false可禁止选择文件
                add[Async],    //添加任务之前触发,返回false将跳过该任务
                upload[Async], //上传任务之前触发,返回false将跳过该任务
                send[Async],   //发送数据之前触发,返回false将跳过该任务

                cancel,        //取消上传任务后触发
                remove,        //移除上传任务后触发

                progress,      //上传进度发生变化后触发(仅html5模式有效)
                complete       //上传完成后触发
            */
            on: {
                //添加之前触发
                add: function (task) {
                    //task.limited存在值的任务不会上传，此处无需返回false
                    switch (task.limited) {
                        case 'ext': return alert("允许上传的文件格式为：" + this.ops.allows);
                        case 'size': return alert("允许上传的最大文件大小为：" + Q.formatSize(this.ops.maxSize));
                    }

                    //自定义判断，返回false时该文件不会添加到上传队列
                    //return false;

                    log(task.name + ": 已添加!");
                },

                //任务移除后触发
                remove: function (task) {
                    log(task.name + ": 已移除!");
                },

                //上传之前触发
                upload: function (task) {
                    //exe文件可以添加，但不会上传
                    if (task.ext == ".exe") return false;

                    //可针对单独的任务配置参数(POST方式)
                    task.data = { name: Date.now() + task.ext };
                },

                //上传完成后触发
                complete: function (task) {
                    if (task.state != Uploader.COMPLETE) return log(task.name + ": " + Uploader.getStatusText(task.state) + "!");

                    var json = task.json;
                    if (!json) return log(task.name + ": 服务器未返回正确的数据！<br />");

                    log(task.name + ": 服务器返回 " + (task.response || ""));
                    log();

                    //this.list  为上传任务列表
                    //this.index 为当前上传任务索引
                    if (this.index >= this.list.length - 1) {
                        //所有任务上传完成
                        log("所有任务上传完成：" + new Date());
                    }
                }
            }
        });
    </script>
</body>
</html>